<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery Ajax</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}

		ul {
			margin: 0;
			padding: 50px;
			list-style: none;
		}

		.register {
			width: 800px;
			margin: 50px auto;
			background-color: #FFF;
			border: 1px solid #CCC;
			border-radius: 5px;
		}

		li {
			display: flex;
			margin: 20px 0;
		}

		label, input {
			display: block;
			float: left;
			height: 46px;
			font-size: 20px;
			box-sizing: border-box;
			color: #333;
		}

		label {
			width: 200px;
			line-height: 46px;
			margin-right: 30px;
			text-align: right;
		}

		input {
			width: 320px;
			padding: 8px;
			line-height: 1;
			outline: none;
			position: relative;
		}

		input.code {
			width: 120px;
		}

		input.verify {
			width: 190px;
			margin-left: 10px;
		}

		input.disabled {
			background-color: #CCC !important;
		}

		input[type=button] {
			border: none;
			color: #FFF;
			background-color: #E64145;
			border-radius: 4px;
			cursor: pointer;
		}

		.tips {
			position: fixed;
			top: 0;
			width: 100%;
			height: 40px;
			text-align: center;
		}

		.tips p {
			min-width: 300px;
			max-width: 400px;
			line-height: 40px;
			margin: 0 auto;
			color: #FFF;
			display: none;
			background-color: #C91623;
		}
	</style>
</head>
<body>
	<div class="register">
		<form id="ajaxForm">
			<ul>
				<li>
					<label for="">用户名</label>
					<input type="text" name="name" class="name">
				</li>
				<li>
					<label for="">请设置密码</label>
					<input type="password" name="pass" class="pass">
				</li>
				<li>
					<label for="">请确认密码</label>
					<input type="password" name="repass" class="repass">
				</li>
				<li>
					<label for="">验证手机</label>
					<input type="text" name="mobile" class="mobile">
				</li>
				<li>
					<label for="">短信验证码</label>
					<input type="text" name="code" class="code">
					<input type="button" value="获取验证码" class="verify">
				</li>
				<li>
					<label for=""></label>
					<input type="button" class="submit" value="立即注册">
				</li>
			</ul>
		</form>
	</div>
	<!-- 提示信息 -->
	<div class="tips">
		<p>用户名不能为空</p>
	</div>
	<!-- 引入jQuery -->
	<script src="js/jquery.min.js"></script>
	<script>
		//1.为立即注册添加绑定事件
		$(".submit").on("click",function(){
			/*获取表单数据*/
			var form=document.getElementById("ajaxForm");
			//var form=$(this).parents("form");
			/*serialize方法的作用：可以将表单的数据序列化为字符串*/
			var formData=$(form).serialize();

			/*保存当前按钮*/
			var _this=$(this);

			/*判断当前这次请求是否已经完成，如果没有完成，则不再进行重复的请求*/
			if(_this.hasClass('disabled')){
				return false;
			}

			//2.发起ajax请求
			$.ajax({
				type:'post',
				url:'127.0.0.1:3000/web/registerOrLogin',
				data:{account:'Riton',pwd:'123456'}},
				/*发送请求前的设置,如设置请求头,数据验证*/
				beforeSend:function(){
					/*验证用户名*/
					if($('.name').val()==''){
						$('.tips>p').text('用户名不能为空')
								.fadeIn(500)
								.delay(2000)
								.fadeOut(500);
						//终止当前请求
						return false;
					}
					/*如果验证通过*/
					/*修改注册提交按钮的状态*/
					_this.val('正在提交...').addClass('disabled');
				},
				/*请求成功的回调*/
				success:function(data){
					//响应之后的处理
					if(data.code==200){
						alert(data.msg);
						location.href=data.result;
					}
					else{
						alert('注册失败');
					}
				},
				/*请求失败的回调*/
				error:function(err){
					console.log(err);
				},
				/*请求完成后的回调，成功失败后都会调用*/
				complete:function(){
					_this.val('立即注册').removeClass('disabled');
				}
			});
		});

		//2.验证码处理
		// $('.verify').on('click',function(){
		// 	var _this=$(this);
		// 	if(_this.hasClass('disabled')){
		// 		return false;
		// 	}
		// 	$.ajax({
		// 		type:'post',
		// 		url:'verify.php',
		// 		data:{'mobile':$('.mobile').val()},
		// 		beforeSend:function(){
		// 			/*验证手机号是否合法，使用正则*/
		// 			var valiStr=/^1\d{10}$/;
		// 			if(!valiStr.test($('.mobile').val())){
		// 				$('.tips>p').text('请填写正确的手机号码')
		// 				.fadeIn(500)
		// 				.delay(2000)
		// 				.fadeOut(500);
		// 				return false;
		// 			}
		// 			_this.addClass('disabled');
		// 			/*倒计时*/
		// 			var total=10;
		// 			var timeId=setInterval(function(){
		// 				_this.val(--total+'秒之后重新获取');
		// 				if(total<=0){
		// 					clearInterval(timeId);
		// 					_this.val('获取验证码').removeClass('disabled');
		// 				}
		// 			},1000);
		// 		},
		// 		success:function(data){
		// 			console.log(data);
		// 		},
		// 		error:function(){},
		// 		complete:function(){}
		// 	});
		// });

		/*验证用户名是否重复*/
		// $('.name').on('blur',function(){
		// 	var _this=$(this);
		// 	$.ajax({
		// 		type:'post',
		// 		url:'validataUserName.php',
		// 		data:{'userName':$('.name').val()},
		// 		beforeSend:function(){
		// 			if($('.name').val()==''){
		// 				$('.tips>p').text('用户名不能为空')
		// 						.fadeIn(500)
		// 						.delay(2000)
		// 						.fadeOut(500);
		// 				//终止当前请求
		// 				return false;
		// 			}
		// 		},
		// 		success:function(data){
		// 			if(data.code==100){
		// 				$('.tips>p').text(data.msg)
		// 						.fadeIn(500)
		// 						.delay(2000)
		// 						.fadeOut(500);
		// 				_this.focus();
		// 			}
		// 		},
		// 		complete:function(){}
		// 	});
		// });
	</script>
</body>
</html>
